<template>
    <div>
        <div align="center" style="font-weight: bold;font-size: 16px;margin-bottom: 20px;">外理公司生产进度统计表（{{status.inOrOut}}）</div>
        <p style="margin-left:20px;">{{showMonth}}</p>
        <table border="1" cellspacing="0" style="text-align: center;" >
            <tr>
                <td rowspan="3" width="10%">单位\项目</td>
                <td :colspan="status.spanNum" v-if="status.showCol1">进口</td>
                <td :colspan="status.spanNum" v-if="status.showCol2">出口</td>
                <td :colspan="status.spanNum1" v-if="status.showCol3">装箱</td>
                <td :colspan="status.spanNum1" v-if="status.showCol4">拆箱</td>
            </tr>
            <tr>
                <td colspan="2" v-if="status.showCol1 && status.showCol6">累计（TEU）</td>
                <td colspan="2" v-if="status.showCol1">小计（TEU）</td>
                <td colspan="3" v-if="status.showCol1 && status.showCol5">F</td>
                <td colspan="3" v-if="status.showCol1 && status.showCol5">E</td>
                <td colspan="2" v-if="status.showCol2 && status.showCol6">累计（TEU）</td>
                <td colspan="2" v-if="status.showCol2">小计（TEU）</td>
                <td colspan="3" v-if="status.showCol2 && status.showCol5">F</td>
                <td colspan="3" v-if="status.showCol2 && status.showCol5">E</td>
                <td rowspan="2" v-if="status.showCol3 && status.showCol6">累计（TEU）</td>
                <td rowspan="2" v-if="status.showCol3">小计（TEU）</td>
                <td rowspan="2" v-if="status.showCol3 && status.showCol5">20</td>
                <td rowspan="2" v-if="status.showCol3 && status.showCol5">40</td>
                <td rowspan="2" v-if="status.showCol3 && status.showCol5">45</td>
                <td rowspan="2" v-if="status.showCol4 && status.showCol6">累计（TEU）</td>
                <td rowspan="2" v-if="status.showCol4">小计（TEU）</td>
                <td rowspan="2" v-if="status.showCol4 && status.showCol5">20</td>
                <td rowspan="2" v-if="status.showCol4 && status.showCol5">40</td>
                <td rowspan="2" v-if="status.showCol4 && status.showCol5">45</td>
            </tr>
            <tr>
                <td v-if="status.showCol1 && status.showCol6">F</td>
                <td v-if="status.showCol1 && status.showCol6">E</td>
                <td v-if="status.showCol1">F</td>
                <td v-if="status.showCol1">E</td>
                <td v-if="status.showCol1 && status.showCol5">20</td>
                <td v-if="status.showCol1 && status.showCol5">40</td>
                <td v-if="status.showCol1 && status.showCol5">45</td>
                <td v-if="status.showCol1 && status.showCol5">20</td>
                <td v-if="status.showCol1 && status.showCol5">40</td>
                <td v-if="status.showCol1 && status.showCol5">45</td>
                <td v-if="status.showCol2 && status.showCol6">F</td>
                <td v-if="status.showCol2 && status.showCol6">E</td>
                <td v-if="status.showCol2">F</td>
                <td v-if="status.showCol2">E</td>
                <td v-if="status.showCol2 && status.showCol5">20</td>
                <td v-if="status.showCol2 && status.showCol5">40</td>
                <td v-if="status.showCol2 && status.showCol5">45</td>
                <td v-if="status.showCol2 && status.showCol5">20</td>
                <td v-if="status.showCol2 && status.showCol5">40</td>
                <td v-if="status.showCol2 && status.showCol5">45</td>
            </tr>
            <tr v-for="item of list">
                <td>{{item.SHIP_AGENT_NAME}}</td>
                <td  width="30px" v-if="status.showCol1 && status.showCol6">{{item.IFPreTotalTeu==0?'':item.IFPreTotalTeu}}</td>
                <td v-if="status.showCol1 && status.showCol6">{{item.IEPreTotalTeu==0?'':item.IEPreTotalTeu}}</td>
                <td v-if="status.showCol1">{{item.IFTotalTeu==0?'':item.IFTotalTeu}}</td>
                <td v-if="status.showCol1">{{item.IETotalTeu==0?'':item.IETotalTeu}}</td>
                <td v-if="status.showCol1 && status.showCol5">{{item.IFTEU20==0?'':item.IFTEU20}}</td>
                <td v-if="status.showCol1 && status.showCol5">{{item.IFTEU40==0?'':item.IFTEU40}}</td>
                <td v-if="status.showCol1 && status.showCol5">{{item.IFTEU45==0?'':item.IFTEU45}}</td>
                <td v-if="status.showCol1 && status.showCol5">{{item.IETEU20==0?'':item.IETEU20}}</td>
                <td v-if="status.showCol1 && status.showCol5">{{item.IETEU40==0?'':item.IETEU40}}</td>
                <td v-if="status.showCol1 && status.showCol5">{{item.IETEU45==0?'':item.IETEU45}}</td>
                <td v-if="status.showCol2 && status.showCol6">{{item.OFPreTotalTeu==0?'':item.OFPreTotalTeu}}</td>
                <td v-if="status.showCol2 && status.showCol6">{{item.OEPreTotalTeu==0?'':item.OEPreTotalTeu}}</td>
                <td v-if="status.showCol2">{{item.OFTotalTeu==0?'':item.OFTotalTeu}}</td>
                <td v-if="status.showCol2">{{item.OETotalTeu==0?'':item.OETotalTeu}}</td>
                <td v-if="status.showCol2 && status.showCol5">{{item.OFTEU20==0?'':item.OFTEU20}}</td>
                <td v-if="status.showCol2 && status.showCol5">{{item.OFTEU40==0?'':item.OFTEU40}}</td>
                <td v-if="status.showCol2 && status.showCol5">{{item.OFTEU45==0?'':item.OFTEU45}}</td>
                <td v-if="status.showCol2 && status.showCol5">{{item.OETEU20==0?'':item.OETEU20}}</td>
                <td v-if="status.showCol2 && status.showCol5">{{item.OETEU40==0?'':item.OETEU40}}</td>
                <td v-if="status.showCol2 && status.showCol5">{{item.OETEU45==0?'':item.OETEU45}}</td>
                <td v-if="status.showCol3 && status.showCol6">{{item.ZXPreTotalTeu==0?'':item.ZXPreTotalTeu}}</td>
                <td v-if="status.showCol3">{{item.ZXTotalTeu==0?'':item.ZXTotalTeu}}</td>
                <td v-if="status.showCol3 && status.showCol5">{{item.ZXTEU20==0?'':item.ZXTEU20}}</td>
                <td v-if="status.showCol3 && status.showCol5">{{item.ZXTEU40==0?'':item.ZXTEU40}}</td>
                <td v-if="status.showCol3 && status.showCol5">{{item.ZXTEU45==0?'':item.ZXTEU45}}</td>
                <td v-if="status.showCol4 && status.showCol6">{{item.CXPreTotalTeu==0?'':item.CXPreTotalTeu}}</td>
                <td v-if="status.showCol4">{{item.CXTotalTeu==0?'':item.CXTotalTeu}}</td>
                <td v-if="status.showCol4 && status.showCol5">{{item.CXTEU20==0?'':item.CXTEU20}}</td>
                <td v-if="status.showCol4 && status.showCol5">{{item.CXTEU40==0?'':item.CXTEU40}}</td>
                <td v-if="status.showCol4 && status.showCol5">{{item.CXTEU45==0?'':item.CXTEU45}}</td>
            </tr>
            <tr v-if="list.length == 0">
                <td colspan="31" style="text-align: center;">暂无数据</td>
            </tr>
        </table>
    </div>
</template>

<script>
    import { getOperationTotalReportByMonth } from "@/api/balance/balance";

    export default {
        name: "monthShipName",
        data() {
            return {
                showMonth :'',
                status: {
                    showCol1: true,
                    showCol2: true,
                    showCol3: true,
                    showCol4: true,
                    showCol5: true,
                    showCol6: true,
                    spanNum: '10',
                    spanNum1: '5',
                },
                list : []
            }
        },
        created() {
            this.loadData()
        },
        methods: {
            loadData() {
                this.showMonth=this.$route.query.factShowTime
                this.status = JSON.parse(localStorage.getItem('productNameStatus'))
                if(!this.status.showCol5 && this.status.showCol6) {
                    this.status.spanNum = 4
                    this.status.spanNum1 = 2
                }else if(!this.status.showCol6 && this.status.showCol5){
                    this.status.spanNum = 8
                    this.status.spanNum1 = 4
                }else if(!this.status.showCol5 && !this.status.showCol6) {
                    this.status.spanNum = 2
                    this.status.spanNum1 = 1
                }else if(this.status.showCol5 && this.status.showCol6){
                    this.status.spanNum = 10
                    this.status.spanNum1 = 5
                }
                this.list = JSON.parse(localStorage.getItem('productReportShipName'))
                this.$nextTick(() => {
                    setTimeout(function(){
                        window.print()
                        window.close();
                    },1000)
                })
            }
        }
    }
</script>

<style scoped>

</style>
